<template>
  <!-- ul.proList>li.proItem>div.itemImage+div.itemInfo -->
  <ul class="proList" :class="{ col_2: flag }">
    <!-- 声明式跳转 - 命名路由的方式 -->
    <!-- <router-link tag="li" :to="{ name: 'detail', params: { proid: item.proid } }" class="proItem" v-for="item of proList" :key="item.proid">
      <div class="itemImage">
        <van-image :src="item.img1"></van-image>
      </div>
      <div class="itemInfo">
        <div class="van-multi-ellipsis--l2">{{ item.proname }}</div>
        <div>{{ item.originprice * item.discount / 100}}</div>
      </div>
    </router-link> -->
    <!-- 声明式跳转 -- 字符串方式 -->
    <!-- <router-link :to="'/detail/' + item.proid" class="proItem" v-for="item of proList" :key="item.proid">
      <div class="itemImage">
        <van-image :src="item.img1"></van-image>
      </div>
      <div class="itemInfo">
        <div class="van-multi-ellipsis--l2">{{ item.proname }}</div>
        <div>{{ item.originprice * item.discount / 100}}</div>
      </div>
    </router-link> -->
    <!-- 编程式导航 -->
    <li @click="toDetail(item.proid)" class="proItem" v-for="item of proList" :key="item.proid">
      <div class="itemImage">
        <van-image :src="item.img1"></van-image>
      </div>
      <div class="itemInfo">
        <div class="van-multi-ellipsis--l2">{{ item.proname }}</div>
        <div>{{ item.originprice * item.discount / 100}}</div>
      </div>
    </li>
    <div class="iconBox" @click="changeFlag">
      <van-icon v-if="flag" name="orders-o" size="36" />
      <van-icon v-else name="apps-o" size="36"/>
    </div>
  </ul>
</template>
<script>
import Vue from 'vue'
import { Icon } from 'vant'
Vue.use(Icon)
export default {
  props: {
    proList: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      flag: true
    }
  },
  methods: {
    toDetail (proid) {
      // this.$router.push('/detail/' + proid) // 拼接字符串
      // this.$router.push({
      //   path: '/detail/' + proid
      // })
      this.$router.push({
        name: 'detail',
        params: { proid }
      })
    },
    changeFlag () {
      this.flag = !this.flag
    }
  }
}
</script>

<style lang="stylus">
.proList
  .proItem
    height 1.3rem
    display flex
    border-bottom 1px solid #ccc
    .itemImage
      height 1.2rem
      width 1.2rem
      margin 0.05rem
      overflow hidden
      // border 1px solid #ccc
      img
        width 100%
        height 100%
    .itemInfo
      flex 1
.proList.col_2
  display flex
  flex-wrap wrap
  .proItem
    width 48%
    height 2.5rem
    // border 1px solid #ccc
    display block
    margin 5px 1%
    box-sizing border-box
    .itemImage
      height 1.3rem
      width 100%
      // border 1px solid #ccc
      margin 0
      overflow hidden
      img
        width 100%
        height 100%
    .itemInfo
      .title
        color #333
.iconBox
  position fixed
  bottom 110px
  right 10px
  background-color #fff
  border-radius 50%
</style>
